/***
 * 使用案例
 */
// const [value, setValue] = useState('');
// <MyInputNumber placeholder="请输入" value={value} onChange={setValue} />;

/***
 * 数字输入组件
 */
export default function MyInputNumber({ onChange, numberType = 'init', numberLength, max, min, ...props }) {
	const [type, digit] = numberType.split('-');
	function handleChange(e) {
		let val = e.target.value;

		if (type === 'float') {
			val = val.replace(/[^\d.]/g, '').replace(/^\./, ''); //只保留数字和点(".")，其余的字符都去掉,以.开始的也去掉
			val = val.replace(/\.{2,}/g, '.'); //只保留第一个点("."),有两个点(".")只保留一个
			val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); //把点(".")进行转换防止被正则表达式抹掉
			val = val.replace(new RegExp(`^(\\-)*(\\d+)\\.(\\d{${digit}}).*$`), '$1$2.$3'); //限制只能输入几位小数
			if (val.indexOf('.') < 0 && val != '') {
				//限制首位不能是0
				val = parseFloat(val);
			}
		} else if (type === 'init') {
			val = val.replace(/[^0-9]/gi, '');
			if (numberLength) val = val.slice(0, numberLength);
		}
		// 判断最大值逻辑
		if (max && Number(val) > Number(max)) val = max;
		// 判断最小值逻辑
		if (min && Number(val) < Number(min)) val = min;
		onChange?.(val);
	}

	return <Input maxLength={20} onChange={handleChange} {...props} />;
}

/***
 * 参数属性
 * @property {String} numberType 数据类型（整型，浮点型）默认为整型，float-n，n为保留小数点后几位
 * @property {Number} `numberType=init` 时才有效， numberLength 只能输入几位整数
 */
MyInputNumber.propTypes = {
	onChange: propTypes.func,
	numberType: function (props, propName) {
		// 自定义验证器，返回一个错误
		if (!['init', 'float'].includes(props[propName].split('-')[0])) {
			return new Error('numberType 传递错误');
		}
	},
	numberLength: propTypes.number
};
